<script setup>
import gameData, { gameList as allGameList } from '@/common/data';
import { computed, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import GameItem from './GItem.vue';
import GameMenus from './GMenus.vue';
import { getQuery } from '@/common/utils';
import { throttle } from 'lodash';

const router = useRouter();
const searchVal = ref('');
const throttleVal = ref('');

const unfold = ref(false);
const gameList = computed(() => {
  return gameData['Recommend'].slice(0, unfold.value ? 999 : 9);
});

const throttleInput = throttle(
  () => {
    searchVal.value = throttleVal.value;
  },
  500,
  { leading: false },
);

watch(throttleVal, () => {
  throttleInput();
});

onMounted(() => {
  window.scrollTo({
    top: 0,
    behavior: 'instant',
  });
});

const searchGames = computed(() => {
  return searchVal.value
    ? allGameList.filter((item) =>
        item.name
          .toLowerCase()
          .replace(/\s+/g, '')
          .includes(searchVal.value.toLowerCase().replace(/\s+/g, '')),
      )
    : [];
});

const handleLogoClick = () => {
  router.push(getQuery('/'));
};

const handleHomeClick = () => {
  router.push(getQuery('/'));
};
</script>
<template>
  <div class="search-page-wrap">
    <!-- 顶部分类导航 -->
    <div class="category-nav">
      <!-- 顶部第一行：Logo和操作按钮 -->
      <div class="nav-top-row">
        <!-- Logo区域 -->
        <div class="nav-logo" @click="handleLogoClick">
          <img src="@/assets/img/logo.png" alt="Puzzle Games Pro" />
          <span>Puzzle Games Pro</span>
        </div>

        <!-- 操作按钮容器 -->
        <div class="nav-actions">
          <!-- 首页图标 -->
          <div class="nav-home" @click="handleHomeClick" title="返回首页">
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>
      </div>

      <!-- 第二行：搜索框 -->
      <div class="search-container">
        <van-search
          v-model="throttleVal"
          shape="round"
          placeholder="Search Games"
          autocomplete="off"
          left-icon=""
          class="search-input"
        />
      </div>
    </div>

    <div class="game-content">
      <!-- 搜索结果 -->
      <div v-if="searchGames.length">
        <div class="search-header">
          <van-icon name="search" />
          <span>{{ searchGames.length }} result{{ searchGames.length > 1 ? 's' : '' }}</span>
        </div>
        <div class="game-list">
          <div
            v-for="game in searchGames"
            :key="game.name || game.key"
            :class="[
              'game-item-wrapper',
              {
                hide: !game.name || game.hidden,
              },
            ]"
          >
            <GameItem :game="game" class="game-item" />
            <div class="game-name">{{ game.name }}</div>
          </div>
        </div>
      </div>

      <!-- 无搜索结果 -->
      <div v-else-if="searchVal && !searchGames.length" class="result-empty">
        <div>No search results yet</div>
        <div>Try searching for something else?</div>
      </div>

      <!-- 推荐游戏 -->
      <div v-if="!searchVal || !searchGames.length">
        <GameMenus />

        <div class="recommend-header">
          <van-icon name="fire-o" />
          <span>Recommend</span>
        </div>
        <div class="game-list">
          <div
            v-for="game in gameList"
            :key="game.name || game.key"
            :class="[
              'game-item-wrapper',
              {
                hide: !game.name || game.hidden,
              },
            ]"
          >
            <GameItem :game="game" class="game-item" />
            <div class="game-name">{{ game.name }}</div>
          </div>
        </div>
        <div class="unfold-box" @click="unfold = !unfold">
          <span>{{ unfold ? 'fold' : 'view' }} more</span>
          <van-icon name="arrow-double-right" :class="{ unfolded: unfold }" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.search-page-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  color: #fff;

  // 顶部分类导航
  .category-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: auto;

    // 顶部第一行：Logo和操作按钮
    .nav-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      gap: 12px;
      min-height: 48px;
    }

    // Logo区域
    .nav-logo {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: opacity 0.2s ease;
      min-width: 0;

      &:active {
        opacity: 0.7;
      }

      img {
        height: 20px;
        width: auto;
        flex-shrink: 0;
      }

      span {
        font-size: 12px;
        color: #fff;
        font-weight: 600;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: linear-gradient(45deg, #4398d1, #fdb62f, #c94536, #88b337);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    // 操作按钮容器（首页和搜索）
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    // 首页图标
    .nav-home {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      color: #fff;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);

      &:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.2);
      }

      svg {
        width: 18px;
        height: 18px;
      }
    }

    // 搜索框容器
    .search-container {
      padding: 8px 12px 12px;
      
      .search-input {
        width: 100%;
        height: 43px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        border-radius: 22px;
        overflow: hidden;

        :deep(.van-search__content) {
          background: transparent;
          height: 100%;
          display: flex;
          align-items: center;
        }

        :deep(.van-field) {
          display: flex;
          align-items: center;
          height: 100%;
        }

        :deep(.van-field__control) {
          color: #fff;
          line-height: 1.5;
          display: flex;
          align-items: center;
          
          &::placeholder {
            color: rgba(255, 255, 255, 0.7);
          }
        }

        :deep(.van-icon) {
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }

  .game-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 0 20px 0;
    min-height: 100vh;
    overflow-x: hidden;
    box-sizing: border-box;

    .search-header {
      padding: 4px 14px;
      margin: 0 0 5px;
      font-size: 16px;
      background: linear-gradient(to right, rgb(52, 114, 255, 1), rgba(52, 114, 255, 0));
      display: flex;
      align-items: center;

      .van-icon {
        margin-right: 8px;
        font-size: 16px;
      }
    }

    .recommend-header {
      padding: 4px 14px;
      margin: 0 0 5px;
      font-size: 16px;
      background: linear-gradient(to right, rgb(255, 44, 44, 1), rgba(255, 100, 52, 0));
      display: flex;
      align-items: center;

      .van-icon {
        margin-right: 8px;
        font-size: 16px;
      }
    }

    .result-empty {
      text-align: center;
      padding: 40px 20px;

      div:nth-child(1) {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 8px;
      }

      div:nth-child(2) {
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        font-weight: normal;
      }
    }

    // GameMenus组件样式
    :deep(.game-menus) {
      margin-top: 16px;
    }

    .game-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      padding: 0 12px;
      margin: 10px 0;
      box-sizing: border-box;

      .game-item-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;

        &.hide {
          display: none;
        }

        .game-item {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          aspect-ratio: 1;
          overflow: hidden;
          width: 100%;
          max-width: 50px;
          box-sizing: border-box;
        }

        .game-name {
          margin-top: 4px;
          font-size: 10px;
          color: #fff;
          text-align: center;
          line-height: 1.2;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-word;
          width: 100%;
          max-width: 60px;
        }
      }
    }

    .unfold-box {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0 50px;
      padding: 12px;
      cursor: pointer;
      transition: opacity 0.2s ease;
      opacity: 0.9;

      &:active {
        opacity: 0.7;
      }

      span {
        margin-right: 6px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
      }

      .van-icon {
        position: relative;
        top: 2px;
        transition: all 0.2s;
        transform: rotate(90deg);

        &.unfolded {
          transform: rotate(-90deg);
        }
      }
    }
  }

  // PC端适配 (1025px及以上，iPad使用移动端布局)
  @media (min-width: 1025px) {
    .category-nav {
      flex-direction: row;
      padding: 5px 10px;
      min-height: 40px;
      align-items: center;
      gap: 6px;
      overflow: hidden;

      .nav-top-row {
        flex-shrink: 0;
        padding: 0;
        min-height: auto;
        gap: 4px;
        display: flex;
        align-items: center;
      }

      .nav-logo {
        gap: 2px;
        flex-shrink: 0;
        max-width: 100px;

        img {
          height: 10px;
        }

        span {
          font-size: 9px;
        }
      }

      .nav-actions {
        gap: 4px;
        flex-shrink: 0;
      }

      .nav-home {
        width: 24px;
        height: 24px;
        flex-shrink: 0;

        svg {
          width: 12px;
          height: 12px;
        }
      }

      .search-container {
        flex: 1;
        min-width: 0;
        padding: 0;
        margin-left: 8px;

        .search-input {
          height: 28px;
          border-radius: 14px;

          :deep(.van-search__content) {
            height: 28px;
            display: flex;
            align-items: center;
          }

          :deep(.van-field) {
            display: flex;
            align-items: center;
            height: 100%;
          }

          :deep(.van-field__control) {
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .game-content {
      padding: 0 50px;

      // GameMenus组件样式
      :deep(.game-menus) {
        margin-top: 20px;
      }

      .search-header,
      .recommend-header {
        margin: 0 0 10px;
        padding: 6px 50px;
        font-size: 18px;

        .van-icon {
          font-size: 18px;
        }
      }

      .game-list {
        grid-template-columns: repeat(9, 1fr);
        gap: 5px;
        padding: 0 50px;

        .game-item-wrapper {
          .game-item {
            max-width: 40px;
          }

          .game-name {
            font-size: 5px;
            margin-top: 2px;
            max-width: 50px;
          }
        }
      }

      .unfold-box {
        padding: 16px 50px;
      }
    }
  }

  // 大屏PC端适配
  @media (min-width: 1440px) {
    .game-content {
      padding: 0 60px;

      .search-header,
      .recommend-header {
        padding: 6px 60px;

        .van-icon {
          font-size: 18px;
        }
      }

      .game-list {
        grid-template-columns: repeat(9, 1fr);
        gap: 8px;
        padding: 0 60px;

        .game-item-wrapper {
          .game-item {
            max-width: 60px;
          }

          .game-name {
            font-size: 8px;
            margin-top: 4px;
            max-width: 70px;
          }
        }
      }

      .unfold-box {
        padding: 16px 60px;
      }
    }
  }
}
</style>
